<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
      p {
        margin: 0%;
        padding: 0%;
      }
      body {
        margin: 0%;
        padding: 0%;
      }
      #count {
        text-align: center;
        background-color: beige;
        width:100% ;
        height: 100px;
        margin: 0%;
      }
      button {
        width: 50px;
        height: 50px;
        margin: 5px;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div id="count">
      <p>
       计数器</br>{{counts}}
      </p>
      <button @click="minus">-</button>
      <button @click="clear">0</button>
      <button @click="plus">+</button>

    </div>
  </body>

  <script>
        const count = Vue.createApp({
        data() {
            return {
            counts:0,
            };
        },
        methods: {
            minus() {
            this.counts--;
            
            },
            plus() {
            this.counts++;
            },
            clear() {
            this.counts=0;
            }
        }
        });
        count.mount("#count");
    </script>
</html>
